﻿@{
    Layout = "_ZjcLayout";
    ViewData["Title"] = "政教处";
}


<fieldset class="layui-elem-field" style="margin: 20px">
    <legend>教职工信息</legend>
    <div class="layui-field-box">
        <div class="layui-col-xs8 layui-col-md8">
            <form class="layui-form">
                <div class="layui-inline">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <select name="type">
                                <option value="教师工号">教师工号</option>
                                <option value="姓名">姓名</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <input class="layui-input" name="key" id="demoReload" autocomplete="off">
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit="" type="submit" lay-filter="btn-search">搜索</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-col-xs4 layui-col-md4">
            <div class="layui-inline">
                <div class="layui-form layui-form-item">
                    <div class="layui-inline">
                        <span>按部门筛选：</span>
                    </div>
                    <div class="layui-inline">
                        <select lay-filter="section" name="section">
                            <option value="">请选择部门</option>
                            <option value="教师">教师</option>
                            <option value="政教处">政教处</option>
                            <option value="校长">校长</option>
                            <option value="财务处">财务处</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row">
            <table class="layui-hide" id="Teacher" lay-filter="user"></table>
        </div>
    </div>
</fieldset>




@section Scripts{
    <script src="~/layui-v2.5.5/layui/layui.all.js" charset="utf-8"></script>
    <script src="~/js/jquery.js"></script>
    <script>
        layui.use(['form', 'table'], function () {
            var table = layui.table,
                form = layui.form;
            //监听部门筛选
            form.on('select(section)', function (data) {
                //console.log(data.elem.value);
                //加载层-风格4
                var loading = layer.msg('数据加载中', {
                    icon: 16
                    , shade: 0.01
                });
                $.ajax({
                    url: '/Api/QueryBySection',
                    data: { section: data.elem.value },
                    type: "POST",
                    dataType: "JSON",
                    success: function (res) {
                        switch (res.code) {
                            case 200:
                                table.render({
                                    elem: '#Teacher'
                                    , cols: [[
                                        { field: 'teacherId', title: '教师工号', width: "10%", sort: true, fixed: true }
                                        , { field: 'tname', title: '姓名', width: "10%" }
                                        , { field: 'sex', title: '性别', width: "10%" }
                                        , { field: 'profession', title: '职称', width: "10%" }
                                        , { field: 'entryTime', title: '入职年份',  minWidth: 150, sort: true }
                                        , { field: 'phone', title: '联系方式', width: "20%" }
                                        , { field: 'sectionName', title: '所属部门名称', minWidth: 50 }

                                    ]]
                                    , data: res.data
                                    , page: true
                                    , height:472
                                });
                                break;
                            case 270:
                                layer.alert("没有与之匹配的数据", { icon: 2 });
                                break;
                            case 280:
                                //方法级渲染
                                table.render({
                                    elem: '#Teacher'
                                    , url: '/Api/QueryAllTeacher'
                                    , cols: [[
                                        { field: 'teacherId', title: '教师工号', width: "15%", sort: true, fixed: true }
                                        , { field: 'tname', title: '姓名', width: "10%" }
                                        , { field: 'sex', title: '性别', width: "10%" }
                                        , { field: 'profession', title: '职称', width: "10%" }
                                        , { field: 'entryTime', title: '入职年份', width: "20%", sort: true }
                                        , { field: 'phone', title: '联系方式', width: "20%" }
                                        , { field: 'sectionName', title: '所属部门名称', minWidth: 50 }

                                    ]]
                                    , page: true
                                    , height:472
                                });
                                break;
                            default:
                                layer.alert("数据异常，请重新尝试！", { icon: 3 });
                        }
                        layer.close(loading);
                    }
                })
            })
            //方法级渲染
            table.render({
                elem: '#Teacher'
                , url: '/Api/QueryAllTeacher'
                , cols: [[
                    { field: 'teacherId', title: '教师工号', width: "15%", sort: true, fixed: true }
                    , { field: 'tname', title: '姓名', width: "10%" }
                    , { field: 'sex', title: '性别', width: "10%" }
                    , { field: 'profession', title: '职称', width: "10%" }
                    , { field: 'entryTime', title: '入职年份', width: "20%", sort: true }
                    , { field: 'phone', title: '联系方式', width: "20%" }
                    , { field: 'sectionName', title: '所属部门名称', minWidth: 50 }
                ]]
                , page: true
                , height:472
            });
            //监听提交
            form.on('submit(btn-search)', function (data) {
                var loading = layer.msg('数据加载中', {
                    icon: 16
                    , shade: 0.01
                });
                $.ajax({
                    url: '/Api/QueryTeacher',
                    data: {
                        type: data.field.type,
                        key: data.field.key
                    },
                    type: "POST",
                    dataType: "JSON",
                    success: function (res) {
                        switch (res.code) {
                            case 200:
                                table.render({
                                    elem: '#Teacher'
                                    , cols: [[
                                        { field: 'teacherId', title: '教师工号', width: "15%", sort: true, fixed: true }
                                        , { field: 'tname', title: '姓名', width: "10%" }
                                        , { field: 'sex', title: '性别', width: "10%" }
                                        , { field: 'profession', title: '职称', width: "10%" }
                                        , { field: 'entryTime', title: '入职年份', width: "20%", sort: true }
                                        , { field: 'phone', title: '联系方式', width: "20%" }
                                        , { field: 'sectionName', title: '所属部门名称', minWidth: 50 }

                                    ]]
                                    , data: res.data
                                    , page: true
                                    , height:472
                                });
                                break;
                            case 270:
                                layer.alert("没有与之匹配的数据", { icon: 2 });
                                break;
                            case 280:
                                //方法级渲染
                                table.render({
                                    elem: '#Teacher'
                                    , url: '/Api/QueryAllTeacher'
                                    , cols: [[
                                        { field: 'teacherId', title: '教师工号', width: "15%", sort: true, fixed: true }
                                        , { field: 'tname', title: '姓名', width: "10%" }
                                        , { field: 'sex', title: '性别', width: "10%" }
                                        , { field: 'profession', title: '职称', width: "10%" }
                                        , { field: 'entryTime', title: '入职年份', width: "20%", sort: true }
                                        , { field: 'phone', title: '联系方式', width: "20%" }
                                        , { field: 'sectionName', title: '所属部门名称', minWidth: 50 }

                                    ]]
                                    , page: true
                                    , height:472
                                });
                                break;
                            default:
                                layer.alert("数据异常，请重新尝试！", { icon: 3 });
                        }
                        layer.close(loading);
                    }
                })
                return false;
            });
        });
    </script>
}
